<template>
	<view class="white-block">
		<view class="property-item" :class="item._id==curPayBy?'cur-pay-by':''" v-for="item in payByList" :key="item._id" @click="choosePayBy(item)">
			<img v-show="item._id==curPayBy" class="property-item-icon" src="../../../static/payBy-active.png" alt="" />
			<img v-show="item._id!=curPayBy" class="property-item-icon" src="../../../static/payBy.png" alt="" />
			<div class="property-item-name">{{item.propertyName}}</div>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { getProperties } from '@/api/bill.js'

	const emit = defineEmits(['change'])

	const payByList = ref([])
	const curPayBy = ref('')
	const getPayByList = async ()=>{
		const res = await getProperties()
		payByList.value = res
		curPayBy.value = res[0]._id
	}
	const choosePayBy = item => {
		curPayBy.value = item._id
		emit('change', curPayBy.value)
	}
	getPayByList()
</script>

<style lang="less" scoped>
	.white-block{
		display: flex;
		flex-direction: row;
		overflow: auto;
		.property-item{
			flex: 1;
			height: 90rpx;
			width: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: #666666;
			flex-shrink: 0;
			.property-item-icon{
				height: 42rpx;
				width: 40rpx;
			}
			.property-item-name{
				display: inline-block;
				width: 100%;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
			&.cur-pay-by{
				color: #6236FF;
			}
		}
	}
</style>